<template>
	<cl-dialog
		:title="editing ? '修改客服组' : '新增客服组'"
		width="400px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@close="close"
		:props="{
			top: '5vh',
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form ref="form" label-position="top" :model="form" :rules="rules">
			<el-form-item label="所属事业部" prop="biz_id">
				<cl-select
					v-model="form.biz_id"
					placeholder="请选择事业部"
					filterable
					:disabled="editing"
					@change="changeBiz"
					style="width: 100%"
				>
					<el-option
						v-for="item in business"
						:key="item.biz_id"
						:label="item.biz_name"
						:value="item.biz_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item ref="brand" label="品牌" prop="bra_id">
				<cl-select
					v-model="form.bra_id"
					placeholder="请选择品牌"
					style="width: 100%"
					filterable
				>
					<el-option
						:label="item.bra_name"
						:value="item.bra_id"
						v-for="(item, index) in bizRefData.brand"
						:key="index"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="名称" prop="name">
				<el-input placeholder="请填写名称" v-model.trim="form.name" clearable />
			</el-form-item>
			<!-- <el-form-item label="选择运营部门" prop="operator_dept">
				<cl-select
					v-model="form.operator_dept"
					style="width: 100%"
					placeholder="请选择运营部门"
					filterable
					@change="changeDept"
				>
					<el-option
						v-for="item in deptList"
						:key="item.dept_id"
						:label="item.dept_name"
						:value="item.dept_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="选择运营人员" prop="operator_id">
				<cl-select
					v-model="form.operator_id"
					style="width: 100%"
					placeholder="请选择运营人员"
					filterable
				>
					<el-option
						v-for="item in userList"
						:key="item.user_id"
						:label="item.user_name"
						:value="item.user_id"
					/>
				</cl-select>
			</el-form-item>
			<el-form-item label="选择类型" prop="type">
				<cl-select
					v-model="form.type"
					style="width: 100%"
					placeholder="请选择类型"
					filterable
				>
					<el-option label="正常" :value="1" />
					<el-option label="客服组" :value="2" />
					<el-option label="城市客服组" :value="3" />
				</cl-select>
			</el-form-item>
			<el-form-item label="选择城市" prop="wx_pool_city" v-if="form.type == 3">
				<cl-select
					v-model="form.wx_pool_city"
					style="width: 100%"
					placeholder="请选择城市"
					filterable
				>
					<el-option
						v-for="item in cityList"
						:key="item.id"
						:label="item.name"
						:value="item.id"
					/>
				</cl-select>
			</el-form-item> -->
			<el-form-item label="客服码类型" prop="contact_type">
				<el-radio-group v-model="form.contact_type" size="mini" :disabled="editing">
					<el-radio :label="5" border>企微码</el-radio>
					<el-radio :label="1" border>加微号</el-radio>
					<el-radio :label="4" border>加微码</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="链接类型" prop="link_type">
				<cl-select
					v-model="form.link_type"
					placeholder="请选择"
					style="width: 100%"
					filterable
				>
					<el-option label="二维码" :value="1" />
					<el-option label="企微客服" :value="2" />
					<el-option label="获客助手" :value="3" />
				</cl-select>
			</el-form-item>
			<el-form-item label="企微客服" prop="servicer_id" v-if="form.link_type == 2">
				<cl-select
					v-model="form.servicer_id"
					placeholder="请选择"
					style="width: 100%"
					filterable
				>
					<el-option
						v-for="(item, index) in serviceList"
						:label="item.wxk_name + '-' + item.name"
						:key="index"
						:value="item.id"
					/>
				</cl-select>
			</el-form-item>
			<template v-if="form.link_type == 3">
				<el-form-item label="链接模式" prop="multiple_customer_link">
					<cl-select
						v-model="form.multiple_customer_link"
						placeholder="请选择"
						style="width: 100%"
						filterable
					>
						<el-option label="单链接(去重)" :value="0" />
						<el-option label="多链接(非去重)" :value="1" />
					</cl-select>
				</el-form-item>
				<el-form-item label="企业微信" prop="corpid" v-if="form.link_type == 3">
					<cl-select
						v-model="form.corpid"
						placeholder="请选择"
						style="width: 100%"
						filterable
						@change="changeCorp"
						:disabled="editing"
					>
						<el-option
							v-for="(item, index) in wxkConfigList"
							:label="item.wxk_name"
							:key="index"
							:value="item.corpid"
						/>
					</cl-select>
				</el-form-item>
				<el-form-item
					label="微信号"
					prop="wxk_userid"
					v-if="form.link_type == 3  && form.multiple_customer_link == 0 && !editing"
				>
					<cl-select
						v-model="form.wxk_userid"
						style="width: 100%"
						placeholder="请选择"
						filterable
						multiple
						:multiple-limit="20"
					>
						<el-option
							:label="item.name"
							:value="item.userid"
							v-for="(item, index) in miniprogramList"
							:key="index"
						/>
					</cl-select>
				</el-form-item>

				<!-- <el-form-item label="获客助手链接" prop="customer_link" v-if="form.multiple_customer_link == 0">
					<el-input placeholder="请填写链接" v-model.trim="form.customer_link" clearable />
				</el-form-item> -->
				<!-- <el-form-item label="获客助手链接(用英文分号;隔开)" prop="customer_links" v-if="form.multiple_customer_link == 1">
					<el-input type="textarea" placeholder="请填写链接" v-model.trim="form.customer_links" clearable />
				</el-form-item> -->
			</template>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" :loading="saving" @click="submit">确定</el-button>
		</template>
	</cl-dialog>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			editing: false,
			saving: false,
			form: {
				id: undefined,
				biz_id: "",
				bra_id: "",
				// operator_dept: "",
				// operator_id: "",
				name: "",
				type: "1",
				contact_type: 5,
				servicer_id: "",
				multiple_customer_link: 0,
				customer_links: "",
				corpid: "",
				wxk_userid: []
				// wx_pool_city: ""
			},
			rules: {
				biz_id: [{ required: true, message: "请选择所属事业部" }],
				bra_id: [{ required: true, message: "请选择品牌" }],
				operator_dept: [{ required: true, message: "请选择部门" }],
				operator_id: [{ required: true, message: "请选择运营人员" }],
				name: { required: true, message: "请填写名称" },
				type: [{ required: true, message: "请选择类型" }],
				contact_type: [{ required: true, message: "请选择客服码类型" }],
				wx_pool_city: [{ required: true, message: "请选择城市" }]
			},
			// 部门列表
			deptList: [],
			// 人员列表
			userList: [],
			cityList: [],
			serviceList: [],
			wxkConfigList: [],
			miniprogramList: []
		};
	},
	computed: {
		bizRefData() {
			const { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		this.form.biz_id = this.getCurrBiz();
	},
	methods: {
		open(editing = false, data = {}) {
			this.visible = true;
			this.editing = editing;
			console.info("editing", editing);
			const _data = JSON.parse(JSON.stringify(data));
			if (editing) {
				const wxk_userid = _data.wxk_userid?.split(",");
				this.form = { ...this.form, ..._data, wxk_userid };
			}

			// this.form.wx_pool_city = data.wx_pool_city ? data.wx_pool_city : ''

			this.bizRelevanceList();
			this.getCityList();
			this.getServiceList();
		},
		beforeClose(done) {
			!this.saving && done();
		},
		close() {
			this.reset();
			this.visible = false;
		},
		reset() {
			this.form = {
				id: undefined,
				biz_id: this.getCurrBiz(),
				bra_id: "",
				// operator_dept: "",
				// operator_id: "",
				name: "",
				type: "1",
				contact_type: 5,
				corpid: "",
				wxk_userid: []
				// wx_pool_city: ''
			};
			this.$refs.form.resetFields();
		},
		changeBiz() {
			this.form.bra_id = "";
			// this.form.operator_dept = "";
			// this.form.operator_id = "";
			// this.form.wx_pool_city = ""

			this.getBrand();
			this.bizRelevanceList();
			this.getCityList();
		},
		changeDept() {
			this.form.operator_id = "";
			this.getUserList();
		},
		bizRelevanceList() {
			this.getDeptList();
			this.getUserList();
		},
		//获取品牌
		async getBrand() {
			const { biz_id } = this.form;
			const data = await this.getBizRefBrand(biz_id);
			this.form.bra_id = data.length == 1 ? data[0]?.bra_id ?? "" : "";
		},
		// 部门
		async getDeptList() {
			return false;
			const { biz_id } = this.form;
			this.deptList = [];
			if (!biz_id) return;
			this.deptList = await this.$store.dispatch("common/getDept", {
				needAll: false,
				parent_id: 0,
				is_store: 0,
				biz_id,
				post: 4
			});
		},
		// 人员列表
		async getUserList() {
			return false;
			const { biz_id, operator_dept } = this.form;
			this.userList = [];
			if (!biz_id || !operator_dept) return;
			this.userList = await this.$store.dispatch("common/getDeptStaff", {
				needAll: false,
				biz_id,
				dept_id: operator_dept,
				post: 4
			});
		},
		// 获取城市
		async getCityList() {
			return false;
			const { biz_id, bra_id } = this.form;
			this.$service.spread.newGetbizcity({ biz_id, bra_id, user_manager: 1 }).then(data => {
				let list = (data || []).map(v => ({ ...v, label: v.name, value: v.id }));
				this.cityList = list;
			});
		},
		async getServiceList() {
			const { biz_id } = this.form;
			this.serviceList = await this.$service.config.getServiceList({ biz_id });
			this.wxkConfigList = await this.$service.workwechat.getWxkConfigList({
				biz_id,
				no_page: 1
			});
		},
		changeCorp() {
			this.form.wxk_userid = [];
			this.getProxyUserWechat();
		},
		async getProxyUserWechat() {
			const { corpid } = this.form;
			const data = await this.$service.config.proxyUserWechat({
				corpid
			});
			console.log(data);

			this.miniprogramList = data;
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				this.saving = true;
				await this.$service.wx[this.editing ? "edit" : "add"]({
					...this.form,
					wxk_userid: this.form?.wxk_userid?.join()
				}).done(() => {
					this.saving = false;
				});
				this.$message.success(this.editing ? "修改成功" : "新增成功");
				this.close();
				this.$emit("confirm", this.editing);
			});
		}
	}
};
</script>
